<template>
	<view class="box">
		<u-navbar :is-back="true" title="余额明细" :border-bottom="false" :title-bold="true"></u-navbar>
		<view class="list container_br" v-if="list.length>0" v-for="item in list" :key="item.id">
			<view class="top jsbc">
				<view class="left">
					{{item.title}}
				</view>
				<view class="right">
					<view class="type" v-if="item.pay_typ==1">
						<span v-if="item.type==1">微信-{{item.amount}}</span>
						<span v-if="item.type==6">微信+{{item.amount}}</span>
					</view>
					<view class="type" v-else>
						<span v-if="item.type==1">余额-{{item.amount}}</span>
						<span v-if="item.type==6">余额+{{item.amount}}</span>
					</view>
				</view>
			</view>
			<view class="bottom jsbc">
				<view class="left">
					{{item.created_at}}
				</view>
				<view class="right">
					<span v-if="item.type==1">商品支付</span>
					<span v-if="item.type==5">积分兑换商品</span>
					<span v-if="item.type==6">订单退款</span>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import {
		closeload,
		toastload
	} from '../../utils/common';
	import {
		getBills
	} from '@/api/index.js'
	export default {
		data() {
			return {
				list: [],
				page: 1,
				flag: false
			};
		},
		onReachBottom() {
			if(this.flag){
				this.getData()
			}
		},
		onLoad() {
			this.getData()
		},
		methods:{
			getData() {
				toastload()
				getBills(1, {
					page: this.page,
					limit: 20
				}).then(res => {
					console.log("余额", res);
					if (res.last_page > res.page) {
						this.page++
						this.flag = true
					} else {
						this.flag = false
					}
					res.list.forEach(item => {
						this.list.push(item)
					})
					closeload()
				})
			}
		}
		
	}
</script>

<style lang="scss">
	.left{
		max-width: 450rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
</style>